<script setup lang="ts">
const [setEle, eleBp] = useElementBreakpoint();

interface ImageModule {
  default: string;
}
const album = import.meta.glob<ImageModule>('~/assets/imgs/currency-logo/*.png', { eager: true });
const paths = Object.keys(album).map(key => album[key].default);
</script>

<template>
  <div :ref="setEle" class="mb-10 flex-between text-sys-text-body lt-tabletl:hidden">
    <div class="min-w-350px flex-center">
      <div class="flex-center flex-1 justify-start gap-2">
        <span class="text-7" :class="eleBp.lt6xl && '!text-4.5'">18</span>
        Networks
      </div>
      <div class="divider-v-gradual mx-5 h-10" />
      <div class="flex-center flex-1 justify-start gap-2">
        <span class="text-7" :class="eleBp.lt6xl && '!text-4.5'">55</span>
        Currencies
      </div>
      <div class="divider-v-gradual mx-5 h-10" />
    </div>
    <div class="core flex-between flex-1">
      <img v-for="(i, k) of paths" :key="i" :class="k === paths.length && eleBp.lt6xl && 'hidden'" :src="i">
      <!-- todo zw说暂时不做 网络弹窗 -->
      <div class="divider-v-gradual mx-5 hidden h-10" />
    </div>
    <div class="hidden min-w-16 cursor-pointer hover:text-sys-text-head">
      {{ $t('wiPpGd0e7VTogE3ifHb') }}
    </div>
  </div>
</template>

<style scoped lang="scss">
      .core {
  img {
    --uno: 'w-110px object-cover';
  }
}
</style>
